<script lang="ts" setup>
import type { PageDTO, PageVO, ResultType } from '@/type/type'
import { getTreeHolePageApi, type TreeHole } from '@/request/api/tree_hole'
import { RouteNameEnum } from '@/enum'
import { useSystemStore } from '@/stores/system'
import router from '@/router'

const page = reactive<PageDTO>({
  current: 1,
  size: 14,
  param: new Map<string, any>()
})

const systemStore = useSystemStore()

let list = ref<TreeHole[]>([])
const getList = () => {
  list.value = []
  getTreeHolePageApi(page).then((res: ResultType<PageVO<TreeHole>>) => {
    if (res.data != null && res.data.list.length > 0) {
      list.value.push(...res.data.list)
    }
  })
}

onMounted(() => {
  getList()
})
</script>

<template>
  <el-container direction="vertical">
    <el-main v-if="list.length" class="auto-column">
      <a
        v-for="(p, i) in list"
        :key="i"
        class="flex flex-col p-5 use-second-bg use-shadow use-radius-sm cursor-pointer use-transitions-shadow-short"
        @click="router.push({ name: RouteNameEnum.TREE_HOLE })"
      >
        <el-container class="gap-3 items-center">
          <el-avatar :size="45" :src="p.avatar" class="" />
          <span class="min-w-24 break-all">{{ p.createTime }}</span>
        </el-container>
        <span class="mt-3 ellipsis-1">{{ p.content }}</span>
      </a>
    </el-main>
    <el-empty v-else />
    <RouteA :name="RouteNameEnum.TREE_HOLE" />
  </el-container>
</template>

<style lang="scss" scoped></style>
